<template>
  <el-dialog
    v-model="visible"
    v-if="load"
    title="合并SPU"
    width="820"
    draggable
    @close="close"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <div class="mb-2">已选择SPU: {{ tableData.length }}条</div>
    <div class="mb-4">
      <vxe-table
        show-overflow
        :data="tableData"
        :column-config="{ resizable: true }"
        :edit-config="{ trigger: 'click', mode: 'cell' }"
        height="400"
      >
        <vxe-column field="" title="选择并入的SPU" width="120">
          <template #default="{ row }">
            <el-radio
              v-model="main_spu_id"
              size="large"
              :label="row.spu_id"
              :name="row.spu_id"
              @click.prevent="radioChange($event, row)"
              ><span></span
            ></el-radio>
          </template>
        </vxe-column>
        <vxe-column field="spu" title="SPU" width="200"></vxe-column>
        <vxe-column field="spu_cn_title" title="SPU中文名"></vxe-column>
      </vxe-table>
    </div>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="save()">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { mergeSPU } from "../api.js";
import { ElMessage, ElMessageBox } from "element-plus";
const load = ref(false);

const data = reactive({
  visible: false,
  loading: false,
  tableData: [],
  main_spu_id: "",
});
const { visible, loading, tableData, main_spu_id } = toRefs(data);

const open = async (records) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  tableData.value = records;
  const sortedRecords = records.sort((a, b) => {
    const dateA = new Date(a.create_time).getTime();
    const dateB = new Date(b.create_time).getTime();
    return dateA - dateB;
  });
  main_spu_id.value = sortedRecords[0]?.spu_id;

  visible.value = true;
};
const close = () => {
  main_spu_id.value = "";
  visible.value = false;
};
const radioChange = (val, row) => {
  main_spu_id.value = row.spu_id;
};

const save = async () => {
  if (!main_spu_id.value) {
    ElMessage.error("请选择合并后的SPU");
    return;
  }

  console.log("tableData.value");
  console.log(tableData.value);

  const messageArray = [];
  tableData.value.forEach((item, index) => {
    if (item.is_combination == 1) {
      messageArray.push(`${item.spu}是组合SKU,组合SKU不支持合并`);
    }
    if (
      index > 0 &&
      item.sku_product_type != tableData.value[index - 1].sku_product_type
    ) {
      messageArray.push("产品类型不一致不支持合并，请确认");
    }
  });

  if (messageArray && messageArray.length > 0) {
    ElMessageBox({
      title: "提示",
      message: () => <div>{messageArray.map((d) => h("p", null, d))}</div>,
    });
    return;
  }

  try {
    const res = await mergeSPU({
      main_spu_id: main_spu_id.value,
      merge_spu_ids: tableData.value.map((i) => i.spu_id),
    });
    ElMessage.success(res.message);
    close();
  } catch (e) {
    throw Error(e);
  }
};

defineExpose({ open });
</script>
